<template>
	<view>
	<view class="login-box">
	<view class="box-title">欢迎回来，我们想念你！</view>
			<view class="input-box">
				<u--form labelWidth="60" labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item label="账号" prop="account">
						<u--input v-model="form.account" border="none"></u--input>
					</u-form-item>
					<u-form-item label="密码" prop="password">
						<u--input :type="showPassword?'text':'password'" v-model="form.password" border="none">
							<template slot="suffix">
									<u-icon :color="showPassword?'#00aaff':'#989898'" @click="showPassword=!showPassword" size="28" name="eye"></u-icon>			
							</template>
						</u--input>
					</u-form-item>
					 <u-row customStyle="margin-bottom: 10px; margin-top:10px;">
					                    <u-col span="6">
					                           <u-checkbox-group placement="column" @change="rememberChange">
					                                   <u-checkbox :customStyle="{marginBottom: '8px'}"  label="记住我" name="remember">
					                                   </u-checkbox>
					                            </u-checkbox-group>
					                    </u-col>
					                    <u-col span="6">
					                        <view class="remember">
												忘记密码
											</view>
					                    </u-col>
					 </u-row>
					 <u-button @click="login" type="primary" color="#0052cc" shape="circle" text="登录"></u-button>
					<view class="tips">
						没有账户，<text @click="register">立即注册！</text>
					</view>
				</u--form>
			</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPassword:false,
				form:{
					account:'',
					password:''
				},
				rules:{
					'account':[
						{
							type:'string',
							required:true,
							message:'请填写用户名',
							trigger:['blur','change']
						},
						{
							min:4,
							max:12,
							message:"长度在4-12个字符之间",
							trigger:['blur','change']
						},
					],
					'password':{
						type:'string',
						required:true,
						message:'请填写密码',
						trigger:['blur','change']
					},
				},
			}
		},
		onLoad(){

		},
		methods: {
			rememberChange(e){
				console.log(e)
				if(e[0]=='remember'){
					this.$u.vuex('remember',true)
				}
			},
			showpassword(){
				this.showPassword=!this.showPassword
			},
			register(){
				uni.redirectTo({
					url:'/pages/public/register'
				})
			},
			login(){
				let that=this
				this.$refs.uForm.validate().then(res=>{
					// uni.$u.toast('校验通过')
					uni.$u.http.post('/user/login',this.form).then((res)=>{
						console.log(res.code) 
						
						if(res.code==1){
							uni.$u.toast(res.msg)
							that.$u.vuex('vuex_token',res.data.userinfo.token)
							that.$u.vuex('vuex_user',res.data.userinfo)
							// console.log(lastPage.url)
							setTimeout(()=>{
								if(that.vuex_lastPage.url){
									uni.$u.route({
													url:that.vuex_lastPage.url,
													params: that.vuex_lastPage.params
												})
								}else{
								
									// uni.redirectTo({
									//     url:'/pages/index/index',
									// })
									// uni.reLaunch({
									//     url:'/pages/index/index',
									// })
									// uni.navigateTo({
									//     url:'/pages/index/index',
									// })
									// uni.navigateBack({
									// 	url:'/pages/index/index',
									// });
									 // uni.navigateBack(); 
									 uni.navigateBack();
									 // uni.switchTab({
									 //     url:'/pages/index/index',
									 // })
									 // uni.navigateBack({
									 //   delta: 1,
									 //   animationType: 'pop-out',
									 //   animationDuration: 200
									 // });
								}
							},2000)

						}
						console.log(res)
					}).catch((e)=>{
						// console.log(e)
					})
				}).catch(errors=>{
					uni.$u.toast(errors[0].message)
				})
			}
			
		}
	}
</script>

<style lang="scss">
.login-box{
	margin: 30px auto 0 auto;
	width: 90vw;
	min-height: 525px;
	opacity: 1;
	border-radius: 48px;
	background: rgba(255, 255, 255, 1);
	box-shadow: 3px 3px 5px  rgba(0, 0, 0, 0.16);
	
	.box-title{
		padding-top: 93px;
		font-size: 24px;
		font-weight: 400;
		letter-spacing: -0.4px;
		line-height: 20px;
		color: rgba(42, 130, 228, 1);
		text-align: center;
		vertical-align: top;
	}
	.input-box{
		padding: 20px;
		/deep/.u-form-item__body{
			margin: 10px 0;
			padding:14px;
			border-radius: 16px;
			background: rgba(243, 243, 243, 1);
		}
		.remember{
			font-size: 14px;
			font-weight: 400;
			letter-spacing: -0.4px;
			line-height: 18px;
			color: rgba(0, 82, 204, 1);
			text-align: right;
			vertical-align: top;
		}
		.tips{
			margin-top:20px;
			font-size: 13px;
			font-weight: 400;
			letter-spacing: -0.2px;
			line-height: 17.84px;
			color: rgba(143, 146, 161, 1);
			text-align: center;
			text{		
				color: rgba(42, 130, 228, 1);
			}
		}
	}
}
</style>
